import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Badge, Descriptions, Card, Button } from 'antd'
import { reqGetHospitalShow } from '@api/hospitalList'

import { IhospitalShowRes } from '@api/hospitalList/model/hospitalListTypes'

export default function HospitalShow() {
  const id = useLocation().state as string

  const [hosShow, setHosShow] = useState<IhospitalShowRes>({})
  useEffect(() => {
    ;(async function () {
      const result = await reqGetHospitalShow(id)
      setHosShow(result)
    })()
  }, [])
  return (
    <Card>
      {/* column={2} 表示一行有两个Item */}
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {hosShow.hospital?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          <img
            src={'data:image/png;base64,' + hosShow.hospital?.logoData}
            alt=""
            width="80"
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {hosShow.hospital?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hosShow.hospital?.param.fullAddress}
        </Descriptions.Item>
        {/* span={2} 表示这一个Item在一行占两个Item的位置 */}
        <Descriptions.Item label="坐车路线" span={2}>
          {hosShow.hospital?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {hosShow.hospital?.intro}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: 20, marginBottom: 20 }}
      >
        <Descriptions.Item label="预约周期">Cloud Database</Descriptions.Item>
        <Descriptions.Item label="放号时间">Prepaid</Descriptions.Item>
        <Descriptions.Item label="停挂时间">YES</Descriptions.Item>
        <Descriptions.Item label="退号时间">
          2018-04-24 18:00:00
        </Descriptions.Item>
        {/* span={2} 表示这一个Item在一行占两个Item的位置 */}
        <Descriptions.Item label="预约规则" span={2}>
          2019-04-24 18:00:00
        </Descriptions.Item>
      </Descriptions>
      <Button>返回</Button>
    </Card>
  )
}
